<template>
    <!-- 交易数据 -->
      <div class="trade">
                <!-- 单品销量排行  退货率分析 -->

       <div style="display:flex;justify-content: space-between;">
        <div style="width:50%;" class="app-container">    <Ranking></Ranking></div>
        <div style="width:50%;" class="app-container">    <ReturnsAnalysis ></ReturnsAnalysis></div>
       </div>

        <!-- 订单统计 -->
            <div class="order app-container">
                <OrderStatistics></OrderStatistics>
            </div>
            <!-- 销量统计 -->

          <div class="sales app-container">
            <Salestatistics></Salestatistics>
        </div>
      </div>
</template>

<script>
import Ranking from "./component/ranking.vue"
import ReturnsAnalysis from "./component/returnsAnalysis.vue";
import OrderStatistics from "./component/orderStatistics.vue";
import Salestatistics from "./component/salestatistics.vue"
export default {
components:{
    Ranking,
    ReturnsAnalysis,
    OrderStatistics,
    Salestatistics
}
}
</script>


<style scoped>
.app-container {
  padding:0
}
</style>